<template>
  <view :data-theme="theme">
    <nav-bar
      :navTitle="title"
      iconColor="#000"
      :backgroundColor="backgroundColor"
      :isBackgroundColor="false"
    ></nav-bar>
    <form @submit="formSubmit" report-submit="true">
      <view class="addAddress borderPad">
        <view class="list borRadius14">
          <view class="item acea-row" style="border: none">
            <view class="name">姓名</view>
            <input
              type="text"
              placeholder="请输入姓名"
              placeholder-style="color:#ccc;"
              name="realName"
              :value="userAddress.realName"
              placeholder-class="placeholder"
              maxlength="20"
            />
          </view>
          <view class="item acea-row">
            <view class="name">手机号码</view>
            <input
              type="number"
              placeholder="请输入手机号码"
              placeholder-style="color:#ccc;"
              name="phone"
              :value="userAddress.phone"
              placeholder-class="placeholder"
              maxlength="11"
            />
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">所在地区</view>
            <view class="address">
              <view class="region_count" @click="changeRegion">
                <text v-if="!addressInfo.length" style="color: #cdcdcd"
                  >请选择地址</text
                >
                <text v-else>{{ addressText }}</text>
              </view>
            </view>
            <text class="iconfont icon-xiangyou"></text>
          </view>
          <view class="item acea-row row-between-wrapper">
            <view class="name">详细地址</view>
            <input
              class="address"
              type="text"
              placeholder="请填写具体地址"
              placeholder-style="color:#ccc;"
              name="detail"
              placeholder-class="placeholder"
              v-model="userAddress.detail"
              maxlength="100"
            />
            <view
              class="iconfont icon-dizhi font_color"
              @tap="chooseLocation"
            ></view>
          </view>
        </view>
        <view class="default acea-row row-middle borRadius14">
          <checkbox-group @change="ChangeIsDefault">
            <checkbox :checked="userAddress.isDefault" />设置为默认地址
          </checkbox-group>
        </view>

        <button class="keepBnt bg_color" form-type="submit">
          {{ orderNo != 0 ? "保存并使用" : "立即保存" }}
        </button>
        <!-- #ifdef MP -->
        <!-- <view class="wechatAddress" v-if="!addressId" @click="getWxAddress"
          >导入微信地址</view
        > -->
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <!-- <view
          class="wechatAddress"
          v-if="this.$wechat.isWeixin() && !addressId"
          @click="getAddress"
          >导入微信地址</view
        > -->
        <!-- #endif -->
      </view>
    </form>
    <view v-show="showLoading" class="bg-fixed"></view>
    <areaWindow
      ref="areaWindow"
      :display="display"
      :address="addressInfo"
      @submit="OnChangeAddress"
      @changeClose="changeClose"
    ></areaWindow>
  </view>
</template>

<script>
import navBar from "@/components/navBar";
import {
  editAddress,
  addAddress,
  getAddressDetail,
  getWxAddressInfo,
} from "@/api/user.js";
// import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
import areaWindow from "../components/areaWindow";
import { Debounce } from "@/utils/validate.js";

let app = getApp();
export default {
  components: {
    areaWindow,
    navBar,
  },
  data() {
    return {
      title: "编辑地址",
      backgroundColor: "#fff",
      cartId: "", //购物车id
      pinkId: 0, //拼团id
      couponId: 0, //优惠券id
      addressId: 0, //地址id
      userAddress: {
        isDefault: false,
      }, //地址详情
      region: ["省", "市", "区"],
      valueRegion: [0, 0, 0, 0],
      district: [],
      multiArray: [],
      multiIndex: [0, 0, 0],
      cityId: 0,
      bargain: false, //是否是砍价
      combination: false, //是否是拼团
      secKill: false, //是否是秒杀
      theme: app.globalData.theme,
      showLoading: false,
      display: false,
      addressInfo: [],
      addressData: [],
      orderNo: "", //订单id
    };
  },
  computed: {
    ...mapGetters(["isLogin"]),
    addressText() {
      return this.addressInfo.map((v) => v.regionName).join("/");
    },
  },
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getUserAddress();
        }
      },
      deep: true,
    },
  },
  onLoad(options) {
    if (this.isLogin) {
      this.orderNo = options.orderNo || 0;
      this.addressId = options.id || 0;
      //   uni.setNavigationBarTitle({
      //     title: this.addressId ? "编辑地址" : "添加地址",
      //   });
      (this.title = this.addressId ? "编辑地址" : "添加地址"),
        this.getUserAddress();
    } else {
      // toLogin();
    }
  },
  methods: {
    // 关闭地址弹窗；
    changeClose: function () {
      this.display = false;
    },
    OnChangeAddress(address) {
      this.addressInfo = address;
    },
    changeRegion() {
      this.display = true;
    },
    getUserAddress: function () {
      if (!this.addressId) return false;
      let that = this;
      getAddressDetail(this.addressId).then((res) => {
        if (res.data) {
          that.$set(that, "userAddress", res.data);
          that.addressInfo = [
            {
              regionName: res.data.province,
              parentId: 1,
              isChild: true,
              regionId: res.data.provinceId,
              regionType: 1,
            },
            {
              regionName: res.data.city,
              parentId: res.data.provinceId,
              regionId: res.data.cityId,
              isChild: true,
              regionType: 2,
            },
            {
              regionName: res.data.district,
              parentId: res.data.cityId,
              regionId: res.data.districtId,
              isChild: true,
              regionType: 3,
            },
            {
              isChild: false,
              parentId: res.data.districtId,
              regionName: res.data.street,
              regionType: 4,
            },
          ];
        }
      });
    },
    toggleTab(str) {
      this.$refs[str].show();
    },
    onConfirm(val) {
      this.region =
        val.checkArr[0] + "-" + val.checkArr[1] + "-" + val.checkArr[2];
    },
    //选择定位
    chooseLocation: function () {
      this.$util.$L.getLocation().then((res) => {
        uni.chooseLocation({
          latitude: uni.getStorageSync("user_latitude"),
          longitude: uni.getStorageSync("user_longitude"),
          success: (res) => {
            this.$set(this.userAddress, "detail", res.name);
          },
        });
      });
    },
    //导入微信地址回显到地址栏
    addressWxImportAdd(res) {
      this.userAddress.realName = res.userName;
      this.userAddress.phone = res.telNumber;
      this.userAddress.detail = res.detailInfo;
      getWxAddressInfo({
        cityName: res.cityName,
        countryName: res.countryName || res.countyName,
        detail: res.detailInfo,
        nationalCode: res.nationalCode,
        provinceName: res.provinceName,
        streetName: res.streetName || res.addressStreetFourthStageName,
      }).then((r) => {
        this.addressInfo = [
          {
            regionName: r.data.province,
            parentId: 1,
            isChild: true,
            regionId: r.data.provinceId,
            regionType: 1,
          },
          {
            regionName: r.data.city,
            parentId: r.data.provinceId,
            regionId: r.data.cityId,
            isChild: true,
            regionType: 2,
          },
          {
            regionName: r.data.district,
            parentId: r.data.cityId,
            regionId: r.data.districtId,
            isChild: true,
            regionType: 3,
          },
          {
            isChild: false,
            parentId: r.data.districtId,
            regionName: r.data.street,
            regionType: 4,
          },
        ];
      });
    },
    // 导入共享地址（小程序）
    getWxAddress: function () {
      this.$util.addressWxImport().then((userInfo) => {
        this.addressWxImportAdd(userInfo);
      });
    },
    // 导入共享地址（微信）；
    getAddress() {
      let that = this;
      that.$wechat.openAddress().then((userInfo) => {
        that.addressWxImportAdd(userInfo);
      });
    },
    /**
     * 提交用户添加地址
     *
     */
    formSubmit: Debounce(function (e) {
      let that = this,
        value = e.detail.value;
      if (!value.realName)
        return that.$util.Tips({
          title: "请填写收货人姓名",
        });
      if (!value.phone)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone))
        return that.$util.Tips({
          title: "请输入正确的手机号码",
        });
      if (!that.addressInfo.length == "省-市-区-街道")
        return that.$util.Tips({
          title: "请选择所在地区",
        });
      if (!value.detail)
        return that.$util.Tips({
          title: "请填写详细地址",
        });
      value.id = that.addressId;
      value.province = that.addressInfo[0].regionName;
      value.provinceId = that.addressInfo[0].regionId;
      value.city = that.addressInfo[1].regionName;
      value.cityId = that.addressInfo[1].regionId;
      value.district = that.addressInfo[2].regionName;
      value.districtId = that.addressInfo[2].regionId;
      value.street =
        that.addressInfo.length > 3 ? that.addressInfo[3].regionName : "";
      value.isDefault = that.userAddress.isDefault;

      uni.showLoading({
        title: "保存中",
        mask: true,
      });
      if (that.addressId) {
        editAddress(value)
          .then((res) => {
            that.$util.Tips({
              title: "修改成功",
              icon: "success",
            });
            uni.hideLoading();
            that.onSuccess();
          })
          .catch((err) => {
            uni.hideLoading();
            return that.$util.Tips({
              title: err,
            });
          });
      } else {
        addAddress(value)
          .then((res) => {
            that.$util.Tips({
              title: "添加成功",
              icon: "success",
            });
            that.addressId = res.data;
            uni.hideLoading();
            that.onSuccess();
          })
          .catch((err) => {
            return that.$util.Tips({
              title: err,
            });
            uni.hideLoading();
          });
      }
    }),
    onSuccess() {
      let orderNo = this.orderNo;
      let id = this.addressId;
      setTimeout(() => {
        if (orderNo != 0 && id != 0) {
          uni.redirectTo({
            url:
              "/pages/goods/order_confirm/index?is_address=1&orderNo=" +
              orderNo +
              "&addressId=" +
              id,
          });
        } else {
          // #ifdef H5
          return history.back();
          // #endif
          // #ifndef H5
          return uni.navigateBack({
            delta: 1,
          });
          // #endif
        }
      }, 1000);
    },
    ChangeIsDefault: function (e) {
      this.$set(this.userAddress, "isDefault", !this.userAddress.isDefault);
    },
  },
};
</script>

<style scoped lang="scss">
.bg-fixed {
  width: 100%;
  height: 750rpx;
  position: absolute;
  top: 0;
}

.addAddress {
  padding-top: 20rpx;
}

.bg_color {
  // @include main_bg_color(theme);
  background: #11cc7b;
}

.addAddress .list {
  background-color: #fff;
  padding: 0 24rpx;
}

.addAddress .list .item {
  border-top: 1rpx solid #eee;
  padding: 24rpx 0;
  justify-content: flex-start;
  align-items: center;
}

.addAddress .list .item .name {
  font-size: 30rpx;
  color: #333;
  width: 120rpx;
}

.addAddress .list .item input,
.address {
  flex: 1;
  width: 490rpx;
  margin-left: 20rpx;
  font-size: 30rpx;
  font-weight: 400;
}

.addAddress .list .item .placeholder {
  color: #ccc;
}

.addAddress .list .item picker .picker {
  width: 410rpx;
  font-size: 30rpx;
}

.addAddress .default {
  padding: 0 30rpx;
  height: 90rpx;
  background-color: #fff;
  margin-top: 23rpx;
}

.addAddress .default checkbox {
  margin-right: 15rpx;
}

.addAddress .keepBnt {
  width: 690rpx;
  height: 86rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 86rpx;
  margin: 80rpx auto 24rpx auto;
  font-size: 32rpx;
  color: #fff;
}

.addAddress .wechatAddress {
  width: 690rpx;
  height: 86rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 86rpx;
  margin: 0 auto;
  font-size: 32rpx;
  @include main_color(theme);
  @include coupons_border_color(theme);
}

.font_color {
  //   @include main_color(theme);
  color: #eb3f3a;
}

.relative {
  position: relative;
}

.icon-dizhi {
  font-size: 44rpx;
  z-index: 100;
}

.abs_right {
  position: absolute;
  right: 0;
}

/deep/ checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  //   @include main_bg_color(theme);
  //   @include coupons_border_color(theme);
  background: #eb3f3a !important;
  border-color: #eb3f3a !important;
  color: #fff !important;
}

/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  //   @include main_bg_color(theme);
  //   @include coupons_border_color(theme);
  background: #eb3f3a !important;
  border-color: #eb3f3a !important;
  color: #fff !important;
  margin-right: 0 !important;
}
</style>
